<template>
  <div>
    <el-form :inline="true" class="demo-form-inline" :model="cForm">
      <el-form-item label="一级分类">
        <!-- 一级分类 -->
        <el-select
          v-model="cForm.category1Id"
          placeholder="一级分类"
          @change="handler1"
          :disabled="!show"
        >
          <el-option
            v-for="(item, id) in Category1List"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级分类">
        <!-- 二级分类 -->
        <el-select
          v-model="cForm.category2Id"
          placeholder="二级分类"
          @change="handler2"
          :disabled="!show"
        >
          <el-option
            v-for="(item2, id2) in Category2List"
            :key="item2.id"
            :label="item2.name"
            :value="item2.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="三级分类">
        <!-- 三级分类 -->
        <el-select
          v-model="cForm.category3Id"
          placeholder="三级分类"
          @change="handler3"
          :disabled="!show"
        >
          <el-option
            v-for="(item3, id3) in Category3List"
            :key="item3.id"
            :label="item3.name"
            :value="item3.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
export default {
  name: "CategorySelect",
  data() {
    return {
      Category1List: [],
      Category2List: [],
      Category3List: [],
      cForm: {
        category1Id: "",
        category2Id: "",
        category3Id: "",
      },
    };
  },
  props:["show"],
  mounted() {
    this.getCategory1List();
  },
  methods: {
    async getCategory1List() {
      let result = await this.$API.attr.reqCategory1List();
      console.log(result);
      this.Category1List = result.data;
    },
    async handler1() {//一级分类回调
      this.Category2List = [];
      this.Category3List = [];
      this.cForm.category2Id = "";
      this.cForm.category3Id = "";
      //当一级分类的select事件回调（当一级分类的option发生变化的时候获取相应二级分类的数据）
      let result = await this.$API.attr.reqCategory2List(this.cForm.category1Id);
      this.Category2List = result.data;
    },
    async handler2() {//二级分类回调
      this.Category3List = [];
      this.cForm.category3Id = "";
      //当一级分类的select事件回调（当一级分类的option发生变化的时候获取相应二级分类的数据）
      let result = await this.$API.attr.reqCategory3List(this.cForm.category2Id);
      console.log(result);
      this.Category3List = result.data;
    },
    handler3() {//三级分类回调
    const {category3Id}=this.cForm;
    console.log(category3Id);
    this.$emit("getCategoryId",this.cForm)
    },
  },
};
</script>

<style>
</style>